<%@ page import="service.PersonService" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String tid=request.getSession().getAttribute("username").toString();
    String nickname= PersonService.getTeacherName(tid);
%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>新建课程</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/create.css">


    <script>
        function login() {
            var user=document.getElementById("account").value;
            var pwd=document.getElementById("user_pwd").value;
            var ajax=new XMLHttpRequest();
            ajax.onreadystatechange=function () {
                if(ajax.status==200&&ajax.readyState==4){
                    var result=ajax.responseText;
                    if(result.indexOf("true")!==-1){
                        window.location.href="self.jsp";
                    }else {
                        alert("登录失败，请检查用户名和密码是否输入正确！");
                    }
                }
            };
            var identitys=document.getElementsByName("identity");
            var identity=identitys[0].value;
            ajax.open("get","Login?user="+user+"&pwd="+pwd+"&identity="+identity);
            ajax.send(null);
        }
    </script>

</head>
<body>
    <!--头部-->
    <div class="top">
        <div class="w">
            <div class="top-left">
                <img src="images/Q-logo.png">
            </div>
            <div class="top-center">
                <input placeholder="搜索你感兴趣的课程" id="wd">
                <script>
                    function search() {
                        var wd=document.getElementById('wd');
                        window.location.href="search-result.jsp?wd="+wd.value;
                    }
                </script>
                <button class="iconfont" onclick="search()">&#xe63c;</button>
            </div>
            <div class="top-right">
                <ul>
                    <a href="index.jsp"><li>首页</li></a>
                    <li>登录注册</li>
                    <a href="self.jsp"><li class="current">个人主页</li></a>
                </ul>
            </div>
        </div>
    </div>

    <div class="top-self" style="background-image: url(images/bg1.jpg); background-size: cover;">
        <div class="w">
            <img class="pro" src="images/pro1.jpg" alt="123"/>
            <div class="text">
                <h2><%=nickname%>同学，欢迎登录</h2>
                <h4>构成我们学习最大障碍的是已知的东西，而不是未知的东西。——贝尔纳</h4>
            </div>
            <a href="QuitLogin"><button class="log_out">退 出 登 录</button></a>
        </div>
    </div>
    <!--中部-->
    <div class="main">
        <div class="main-top-bar">
            <div class="w">
                <a href="index.jsp">首页&nbsp>&nbsp</a>
                <a href="self.jsp">个人中心&nbsp>&nbsp</a>
                <a href="#" class="current">新建课程</a>
            </div>
        </div>
        <div class="main-content">
            <p>请在此填写课程信息</p>
<%--            <form action="UploadCourse" method="post" enctype="multipart/form-data" onSubmit="return isValid(this);">--%>
                <div class="btns">
                    <input id="submit" class="create-btn" type="submit" value="新建"/>
                    <input class="create-btn" type="reset" value="重置"/>
                </div>
                <div class="data">
                    <div>
                        <h2>课&nbsp&nbsp程&nbsp&nbsp名</h2>
                        <input id="in1" type="text" name="coursename" placeholder="输入课程名"/>
                    </div>
                    <div>
                        <h2>课程简介</h2>
                        <textarea id="introduction" placeholder="输入课程简介" name="introduction"></textarea>
                    </div>
                    <div class="i2">
                        <div class="d1">
                            <h2 class="h">视频封面设置</h2>
                            <span class="s">(格式jpg、jpeg、png)</span>
                        </div>
                        <div class="img">
                            <img src="" alt="" id="img"/>
                        </div>


                        <button>上传图片</button>
                        <input title="" type="file" id="upload3" name="course_pic">
                    </div>
                </div>
<%--            </form>--%>
        </div>
    </div>

    <!--尾部-->
    <div class="bottom">
        <div class="bottom-board">
            <span>丰富的视频资源帮助学生更好地学习</span>
            <span>基于认知负荷的多少推荐课程</span>
            <span>方案多多，适合每一位学生</span>
        </div>
    </div>

    <script src="js/myFunc.js"></script>
    <script>

        document.querySelector("#upload3").addEventListener("change",function (e) {
            //获取到选中的文件
            var files = document.querySelector("#upload3").files;
            uploadPic(files);
        }, false);

        function uploadPic(files) {
            console.log(files);
            var formData = new FormData();
            var file = files[0];
            var path = file.name;
            var suffix = path.substr(path.lastIndexOf('.'));
            var lower_suffix = suffix.toLowerCase();

            if(!(lower_suffix === '.jpg' || lower_suffix === '.png' || lower_suffix === '.jpeg')){
                alert('文件'+ file.name + '格式错误');
                // continue;
            }else{
                var reads = new FileReader();
                reads.readAsDataURL(file);
                reads.onload = function(e) {
                    $("img").src = this.result;
                };

            }
        }

        var submit=document.getElementById("submit");
        var coursename=document.getElementById("in1");
        var introduction=document.getElementById("introduction");
        var file=document.getElementById("upload3");
        submit.onclick=function () {
            if(coursename.value==""){
                alert("请输入课程名");
                return;
            }
            if(file.files.length===0){
                alert("选择课程封面");
                return;
            }
            var formData=new FormData();
            formData.append("course_pic",file.files[0]);
            formData.append("coursename",coursename.value);
            formData.append("introduction",introduction.value);
            var ajax=new XMLHttpRequest();
            ajax.onreadystatechange=function (ev1) {
                if(ajax.status==200&&ajax.readyState==4){
                    var result=ajax.responseText;
                    if(result.indexOf("true")!==-1){
                        alert("上传成功！");
                    }else {
                        alert("上传失败！");
                    }
                }
            };
            ajax.open("post","UploadCourse");
            ajax.send(formData);
        }


    </script>
</body>
</html>